<template>
  <div class="projectConfig content">
    <el-form
      ref="form"
      :model="model"
      :rules="rules"
      class="basic-info-content"
      label-width="96px"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="任务名称" prop="name">
            <el-input
              class="task-name"
              v-model="model.name"
              maxlength="50"
              placeholder="请输入"
              :disabled="isEdit && isStopOrOn"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="title">基础设置</div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="科室" prop="department">
            <el-row>
              <el-col :span="24">
                <el-select
                  :disabled="isEdit && isStopOrOn"
                  v-model="model.department"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in departmentList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务标签" prop="label">
            <el-row>
              <el-col :span="24">
                <el-select
                  v-model="model.label"
                  placeholder="请选择"
                  :disabled="isEdit && isStopOrOn"
                >
                  <el-option
                    v-for="item in taskLabels"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务目标" prop="target">
            <el-row>
              <el-col :span="24">
                <el-select
                  :disabled="isEdit && isStopOrOn"
                  v-model="model.target"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in taskTargets"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务用途" prop="uses">
            <el-row>
              <el-col :span="24">
                <el-select
                  v-model="model.uses"
                  placeholder="请选择"
                  :disabled="isEdit && isStopOrOn"
                >
                  <el-option
                    v-for="item in usess"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="废片原因" prop="discardCode">
            <el-row>
              <el-col :span="24">
                <el-select
                  :disabled="isEdit && isStopOrOn"
                  multiple
                  v-model="model.discardCode"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in discardReasons"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="underscore"></div>

      <div class="title">标注设置</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="标注客户端" class="el-form-item-checkbox">
            <el-checkbox
              :disabled="isEdit && isStopOrOn"
              v-model="model.showDefaultWindow"
              >设置默认窗宽窗位</el-checkbox
            >
            <el-select
              v-show="model.showDefaultWindow"
              v-model="model.defaultWindow"
              placeholder="请选择"
              :disabled="isEdit && isStopOrOn"
            >
              <el-option
                v-for="item in windows"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="no-margin-left el-form-item-checkbox">
            <el-checkbox :disabled="isEdit && isStopOrOn" v-model="model.findings"
              >需要展示检查所见</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="no-margin-left el-form-item-checkbox">
            <el-checkbox :disabled="isEdit && isStopOrOn" v-model="model.diagnosis"
              >需要展示诊断所得</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-checkbox :disabled="isEdit && isStopOrOn" v-model="model.showYay"
              >需要阴阳性</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="no-margin-left">
            <el-checkbox :disabled="isEdit && isStopOrOn" v-model="model.showReport"
              >需要图文报告</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label=" 整体病症组件" class="el-form-item-over-handle">
            <el-row>
              <el-col :span="17" style="display: flex">
                <select-table-page
                  placeholder="整体病症组件"
                  v-model="model.seriesFcList"
                  :value="model.seriesFcList"
                  :data="seriesFcListData"
                  :remote-method="setSeriesFcListData"
                  key-name="id"
                  value-name="name"
                  :collapseTags="false"
                  :multiple="true"
                  :disabled="isEdit && isStopOrOn"
                  @change="setComponentTableData"
                ></select-table-page>
                <el-button
                  style="margin-left: 24px; border: none"
                  class="el-button-view"
                  size="mini"
                  @click="checkImageFcListAll"
                  >查看已添加组件</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="影像布局" prop="imageLayout">
            <el-row>
              <el-col :span="17" style="display: flex">
                <el-select
                  v-model="model.imageLayout"
                  placeholder="请选择"
                  :disabled="isEdit && isStopOrOn"
                >
                  <el-option
                    v-for="item in imageLayouts"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- FormComponent -->

      <form-component
        v-model="formComponentVisible"
        :id="formComponentId"
      ></form-component>

      <Layout
        v-show="model.imageLayout"
        :title="layoutTitle"
        :lesionBizTypes="lesionBizTypes"
        @change="layoutChange"
        ref="refLayout"
      ></Layout>

      <div class="underscore"></div>

      <!-- 添加标注数据 -->
      <el-dialog
        title="查看已添加的标注数据"
        v-model="addLabelDataVisible"
        width="790px"
        class="el-dialog-style"
        center
        :show-close="false"
      >
        <el-table
          :data="seriesFcListTableData"
          style="width: 100%"
          stripe
          row-key="id"
          class="series-table"
          ref="seriesTable"
        >
          <el-table-column
            label="排序"
            width="54"
            center
            class="el-table-column-sort el-table-new"
          >
            <template #default="scope">
              <div class="sort">
                <div class="iconfont icon-shangxiayidong"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="标注字段编码" width="124">
          </el-table-column>
          <el-table-column label="标注字段名称" width="186">
            <template #default="scope">
              <span class="label-name" @click="formComponentRead(scope.row)">{{
                scope.row.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" label="控件类型">
            <template #default="scope">
              <span class="">{{ ControlTypes[scope.row.type] }}</span>
            </template>
          </el-table-column>
          <el-table-column width="68" label="标签">
            <template #default="scope">
              <span>{{ scope.row.tagList ? scope.row.tagList.toString() : null }}</span>
            </template>
          </el-table-column>

          <el-table-column label="是否必填" width="96">
            <template #default="scope">
              <el-switch
                :disabled="isEdit && isStopOrOn"
                v-model="scope.row.required"
                class="el-switch-style"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="112">
            <template #default="scope">
              <span class="del-botton" @click="delImageFcList(scope)">删除</span>
            </template>
          </el-table-column>
        </el-table>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelImageFcList">取 消</el-button>
            <el-button type="primary" @click="confirmImageFcList">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-form>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
// import { Message } from '@arco-design/web-vue';
import { getUrlParams } from "@/utils/window";
import { PageType, ProjectStatus, taskStatus } from "@/utils/emun";
import {
  formComponentSearch,
  formComponentRead,
  validateTaskName,
  annoTask,
  taskUpdate,
} from "@/api/projectDetail/projectDetail";
import bus from "@/utils/bus";
import Layout from "./layout.vue";
import SelectTablePage from "@/components/select-table-page/index.vue";
import { ControlTypes, Step } from "@/utils/emun";
import Sortable from "sortablejs";
import FormComponent from "@/components/formComponent/formComponent.vue";
import { setDraft, getDraft } from "@/utils/draft";
import { commonList } from "@/api/common/common";

const baseSelectValidate = {
  required: true,
  message: "请选择",
  trigger: ["blur", "change"],
};

export default {
  components: {
    Layout,
    SelectTablePage,
    FormComponent,
  },
  data() {
    const { projectId, projectStatus } = getUrlParams();
    return {
      ControlTypes: ControlTypes,
      key: "value",
      pageType: projectId && projectId.length === 16 ? PageType.create : PageType.edit,
      projectStatus: projectStatus ? Number(projectStatus) : null,
      projectId,
      status: this.status,
      projectData: {},
      imageAnnotationListInitData: [], // 初始化的imageAnnotationList数据
      annoListIndex: { n1: 0, n2: 0 }, // 当前操作的annoList的下标，二维数组的下标 n1: 一级，n2：二级
      annoDisabled: false, // 是否不可编辑
      冠脉分割List: [], // ['左心室', '左心房', '右心室', '右心房', '主动脉', '左室壁', '冠脉'], // 分割层数选项
      model: {
        //基础设置
        name: null, //任务名称
        department: null, //科室
        label: null, //任务标签
        target: null, //任务目标
        uses: null, //任务用途
        discardCode: [], // 废片原因 以,分隔

        showDefaultWindow: false,
        defaultWindow: "", //默认窗宽窗位
        findings: false, //是否展示检查所见
        diagnosis: false, //是否展示诊断所得
        showYay: false, //是否需要阴阳性
        yayAttributes: null,
        showReport: false, //是否需要图文报告
        seriesFcList: [],
        seriesFcLists: [],
        imageLayout: "", //布局
        lesionList: [
          //病灶设置
          // {
          //   lesionValue: "",      //病灶编码
          //   color: "",            //颜色
          //   toolValueList: [],    //工具编码列表
          //   imageFcList: [{       //整体征象设置
          //       fcId: null,         // 组件ID
          //       required: false     // 是否必填,
          //   }],
          // }
        ],
        annoType: [], //标注类型
      },
      addLabelDataVisible: false,
      layoutTitle: "",
      seriesFcListData: {
        total: 0,
        list: [],
      },
      rules: {
        name: [baseSelectValidate, { validator: this.validateName, trigger: "blur" }],
        label: [baseSelectValidate],
        target: [baseSelectValidate],
        department: [baseSelectValidate],
        uses: [baseSelectValidate],
        discardCode: [baseSelectValidate],
        imageLayout: [baseSelectValidate],
        defaultWindow: {
          validator: async (rule, value, callback) => {
            if (this.model.showDefaultWindow && !value) {
              return callback(new Error("请选择"));
            }
            callback();
          },
          required: true,
          message: "请选择",
          trigger: ["blur", "change"],
        },
      },
      departmentList: [], //科室
      taskLabels: [],
      taskTargets: [],
      usess: [],
      discardReasons: [], //废片原因
      seriesImgFileTypeList: [], // 数据类型
      windows: [], // 默认窗宽窗位
      groups: [],
      seriesFields: [], //聚合条件
      imageLayouts: [], //
      seriesFcListTableData: [], //用于显示已添加组件弹框中数据
      initTableData: [], //初始的已添加组件数据
      initProjectConfig: {},
      isChangeModel: false,

      lesionList: [],
      formComponentId: "",
      formComponentVisible: false,
      statusList: [],

      lesionBizTypes: [], // 病灶设置数据集合
    };
  },
  watch: {
    "model.showDefaultWindow"(value) {
      if (!value) {
        this.model = {
          ...this.model,
          defaultWindow: "",
        };
      }
    },
    "model.imageLayout": function (value, oldValue) {
      this.setLayoutTitle(value);
      if (value && oldValue) {
        this.lesionList = [];
        this.$refs.refLayout.setData(this.lesionList || []);
      }
    },
    model: {
      deep: true,
      handler(model) {
        setDraft(this.projectId, "projectConfigModel", model);
      },
    },
    seriesFcListTableData: {
      deep: true,
      handler(seriesFcListTableData) {
        setDraft(this.projectId, "seriesFcListTableData", seriesFcListTableData);
      },
    },
  },
  computed: {
    isCreate() {
      return this.pageType === PageType.create;
    },
    isEdit() {
      return this.pageType === PageType.edit;
    },
    isView() {
      return this.pageType === PageType.view;
    },
    // 进行中
    isOn() {
      return taskStatus.way === this.projectStatus;
    },
    // 未发布
    isOff() {
      return taskStatus.off === this.projectStatus;
    },
    // 已完成
    isFinish() {
      return taskStatus.finish === this.projectStatus;
    },
    // 已终结
    isStop() {
      return taskStatus.end === this.projectStatus;
    },
    // 进行中 或者 已终结
    isStopOrOn() {
      return this.isOn || this.isStop;
    },
  },

  async created() {
    await this.initData();
    this.$nextTick(() => {
      // this.$refs.form.clearValidate();
    });

    bus.off("labelProject." + Step.projectConfig);
    bus.on("labelProject." + Step.projectConfig, () => {
      // 下一步
      this.$refs.form.validate(async (valid) => {
        const annoValid = await this.$refs.refLayout.validateAnnoType();
        if (valid && annoValid) {
          bus.emit("labelProject.valid");
        }
      });
    });

    bus.off(`labelProject.editSave.${Step.projectConfig}`);
    bus.on(`labelProject.editSave.${Step.projectConfig}`, () => {
      this.$refs.form.validate(async (valid) => {
        const annoValid = await this.$refs.refLayout.validateAnnoType();
        if (valid && annoValid) {
          this.editSave();
        }
      });
    });
  },
  methods: {
    async initData() {
      const res = await commonList();
      const listData = res.data || {};
      this.departmentList = listData.departments;
      this.taskLabels = listData.taskLabels;
      this.taskTargets = listData.taskTargets;
      this.usess = listData.taskUses;
      this.discardReasons = listData.discardReasons;
      this.windows = listData.windows;
      // listData.imageLayouts.push({name: '视频标注布局', value: 'VIDEO_ANNO'})
      this.imageLayouts = listData.imageLayouts; //影像布局
      // 病灶设置下拉
      this.lesionBizTypes = listData.lesionBizTypes?.map((item) => ({
        name: item.name,
        id: +item.value,
      }));

      if (this.isCreate) {
        const createModel = getDraft(this.projectId, "projectConfigModel");
        if (createModel) {
          this.model = createModel;
          this.lesionList = createModel.lesionList;
          console.log(createModel, "createModel");
          this.setComponentTableData(createModel.seriesFcList);
          this.$nextTick(() => {
            this.$refs.refLayout.setData(createModel.lesionList || []);
          });
        }
      }

      if (this.isEdit) {
        const draftModel = getDraft(this.projectId, "projectConfigModel") || {};
        const res = (await annoTask(this.projectId)).data;
        const { annoInfo, taskInfo, annoUserInfo, dataInfo } = res;
        setDraft(this.projectId, "annoUserSetting", annoUserInfo);
        setDraft(this.projectId, "dataSetting", dataInfo.seriesList);
        const discardCode =
          draftModel.discardCode ||
          (taskInfo.discardCode ? taskInfo.discardCode.split(",") : []);
        const getValue = (value1, value2) =>
          value1 !== undefined ? value1 : value2 || false;
        const showDefaultWindow = !!getValue(
          draftModel.defaultWindow,
          annoInfo.defaultWindow
        );

        const editModel = {
          //基础设置
          name: draftModel.name || taskInfo.name, //任务名称
          department: draftModel.department || taskInfo.department, //科室
          label: draftModel.label || taskInfo.label, //任务标签
          target: draftModel.target || taskInfo.target, //任务目标
          uses: draftModel.uses || taskInfo.uses, //任务用途
          discardCode: discardCode, // 废片原因 以,分隔
          showDefaultWindow,
          defaultWindow: showDefaultWindow
            ? getValue(draftModel.defaultWindow, annoInfo.defaultWindow)
            : "", //默认窗宽窗位
          findings: getValue(draftModel.findings, annoInfo.findings), //是否展示检查所见
          diagnosis: getValue(draftModel.diagnosis, annoInfo.diagnosis), //是否展示诊断所得
          showYay: getValue(draftModel.showYay, annoInfo.showYay), //是否需要阴阳性
          showReport: getValue(draftModel.showReport, annoInfo.showReport), //是否需要图文报告
          yayAttributes: null,
          seriesFcList: draftModel.seriesFcList
            ? draftModel.seriesFcList
            : (annoInfo.seriesFcList || []).map((item) => item.id || item.fcId),
          seriesFcLists: draftModel.seriesFcLists || annoInfo.seriesFcList || [],
          imageLayout: draftModel.imageLayout || annoInfo.imageLayout || "", //布局
          lesionList: draftModel.lesionList || annoInfo.lesionList || [],
          annoType: draftModel.annoType || annoInfo.annoType || [], //标注类型
        };
        this.model = editModel;
        this.setComponentTableData(null, editModel.seriesFcLists);
        this.lesionList = editModel.lesionList;
        this.$nextTick(() => {
          this.$refs.refLayout.setData(editModel.lesionList || []);
        });
      }
      await this.initSeriesFcListData();
      this.setLayoutTitle();
    },

    async formComponentRead({ id }) {
      this.formComponentId = id;
      this.formComponentVisible = true;
    },
    async editSave() {
      const model = this.getModel();
      model.id = this.projectId;
      await taskUpdate(model);
      bus.emit("labelProject.goCreated");
    },
    getModel() {
      const {
        projectConfigModel,
        seriesFcListTableData,
        annoUserSetting,
        dataSetting,
      } = getDraft(this.projectId) || {
        projectConfigModel: {},
        seriesFcListTableData: [],
      };
      // 基本信息
      const basicSetting = {
        name: projectConfigModel.name, //任务名称
        department: projectConfigModel.department, //科室
        label: projectConfigModel.label, //任务标签
        target: projectConfigModel.target, //任务目标
        uses: projectConfigModel.uses, //任务用途
        discardCode: projectConfigModel.discardCode
          ? projectConfigModel.discardCode.join(",")
          : "", // 废片原因 以,分隔
      };
      // 标注信息
      const annoSetting = {
        defaultWindow: projectConfigModel.defaultWindow, //默认窗宽窗位
        findings: projectConfigModel.findings, //是否展示检查所见
        diagnosis: projectConfigModel.diagnosis, //是否展示诊断所得
        showYay: projectConfigModel.showYay, //是否需要阴阳性
        showReport: projectConfigModel.showReport, //是否需要图文报告
        imageLayout: projectConfigModel.imageLayout, //布局
        seriesFcList: (seriesFcListTableData || []).map((item) => {
          return {
            fcId: item.id || item.fcId,
            required: item.required,
          };
        }),
        lesionList: (projectConfigModel?.lesionList || []).map((item) => {
          return {
            lesionValue: item.lesionValue, //病灶编码
            color: item.color, //颜色
            toolValueList: item.toolValueList, //工具编码列表
            imageFcList: (item.imageFcListData || []).map((subItem) => {
              return {
                fcId: subItem?.id || subItem?.fcId || subItem,
                required: subItem?.required || false,
              };
            }),
            bizType: item.bizType,
          };
        }),
      };
      const model = {
        basicSetting,
        annoSetting,
        annoUserSetting: this.getAnnoUserSettingModel(),
        dataSetting: { annoSeriesList: dataSetting },
      };
      return model;
    },
    getAnnoUserSettingModel() {
      const { annoUserSetting } = getDraft(this.projectId) || {
        annoUserSetting: {},
      };
      const annoUserList =
        annoUserSetting.pubMethod == 2
          ? (annoUserSetting.annoUserList || []).map((item) => {
              return {
                companyId: item.company?.id || item.companyId,
                userIdList: (item.userList || []).map((subItem) => subItem.id),
              };
            })
          : [];
      const _annoUserSetting = {
        beginDate: annoUserSetting.beginDate,
        endDate: annoUserSetting.endDate,
        remark: annoUserSetting.remark,
        pubMethod: annoUserSetting.pubMethod,
        assignMethod: annoUserSetting.assignMethod,
        crossNum:
          annoUserSetting.assignMethod == 1 ? 1 : Number(annoUserSetting.crossNum),
        annoUserList,
      };
      return _annoUserSetting;
    },
    different(newModel, oldModel) {
      let model = {};
      Object.keys(newModel).forEach((key) => {
        let value;
        if (Array.isArray(newModel[key])) {
          value = this.differentArray(newModel[key], oldModel[key]);
        } else if (Object.prototype.toString.call(newModel[key]) == "[object Object]") {
          value = this.different(newModel[key], oldModel[key]);
        } else if (newModel[key] !== oldModel[key]) {
          value = newModel[key];
        }
        if (value !== undefined) {
          model[key] = value;
        }
      });
      return Object.keys(model).length ? model : undefined;
    },
    differentArray(newArray, oldArray) {
      if (!Array.isArray(oldArray) || newArray.length !== oldArray.length)
        return newArray;
      let array;
      newArray.forEach((item, index) => {
        if (array) return;
        const obj = this.different(item, oldArray[index]);
        if (obj) {
          array = newArray;
        }
      });
      return array;
    },

    setLayoutTitle(value) {
      const item =
        this.imageLayouts.find(
          (item) => item.value == value || item.value == this.model.imageLayout
        ) || {};
      this.layoutTitle = item.name;
    },
    getArrayValue(storageModelArray, modelArray) {
      return Array.isArray(storageModelArray) && storageModelArray.length
        ? storageModelArray
        : modelArray;
    },
    // 获取 整体病症组件数据
    async getSeriesFcListData(options = {}) {
      const model = {
        page: options.page || 1,
        pageSize: options.pageSize || 10,
        ids: options.ids || null,
        name: options.value || null,
      };
      const res = await formComponentSearch(model);
      return res.data;
    },
    /*
      select分页多选框数据如果不在第一页，不能正确显示，需要额外处理：查询数据并把数据添加到第一页的列表，隐藏起来不要让用户看到
    */
    async initSeriesFcListData(options) {
      const res = await this.getSeriesFcListData(options);
      const ids = this.isNotOnePageData(res.list, this.model.seriesFcList);
      if (ids) {
        const res2 = await this.getSeriesFcListData({ ids });
        res2.list.forEach((item) => {
          item.className = "hide";
        });
        res.list.push(...res2.list);
      }
      this.seriesFcListData.list = res.list;
      this.seriesFcListData.total = res.total;
    },
    // 设置整体病症组件数据
    async setSeriesFcListData(options) {
      const res = await this.getSeriesFcListData(options);
      this.seriesFcListData.list = res.list;
      this.seriesFcListData.total = res.total;
      console.log(this.seriesFcListData.list, "this.seriesFcListData.list");
    },
    //数据不在第一页
    isNotOnePageData(list, values) {
      if (values.length == 0 || values.every((value) => !value)) return false;
      const ids = values.filter((value) => !list.find((item) => item.id === value));
      return ids.length ? ids : false;
    },
    layoutChange(lesionList, annoType) {
      this.model = {
        ...this.model,
        lesionList,
        annoType,
      };
    },
    validateDefaultAnno() {
      const lesionList = JSON.parse(JSON.stringify(this.model.lesionList));
      if (!lesionList || lesionList.length == 0 || lesionList.length == 1) return;
      const isEmpty = lesionList.every((item) => !item.defaultAnno);
      if (isEmpty) return;
      const index = lesionList.findIndex((item) => item.defaultAnno);
      const selectedItem = lesionList.splice(index, 1)[0];
      let msg = "";
      lesionList.forEach((item) => {
        if (msg) return;
        const { toolTypeList, imageFcList } = item;
        const toolIsClude = this.include(selectedItem.toolTypeList, toolTypeList);
        let messages = [];
        if (!toolIsClude) {
          messages.push(`标注工具`);
        }
        const fcIsClude = this.include(selectedItem.imageFcList, imageFcList);
        if (!fcIsClude) {
          messages.push(`小征象`);
        }
        if (messages.length) {
          msg = `${item.name}未包含${selectedItem.name}的${messages.join("、")}`;
        }
      });
      return msg;
    },
    include(a, b) {
      let flag = true;
      a.forEach((value) => {
        const index = b.findIndex((_value) => value === _value);
        if (index == -1) {
          flag = false;
        }
      });
      return flag;
    },
    async setComponentTableData(_ids, seriesFcLists) {
      console.log(_ids, seriesFcLists, "seriesFcLists");
      const ids = Array.isArray(_ids) ? _ids : this.model.seriesFcList;
      let seriesFcListTableData = [];
      if (ids.length > 0) {
        const res = await this.getSeriesFcListData({ ids, pageSize: ids.length });
        const tableList =
          seriesFcLists || getDraft(this.projectId, "seriesFcListTableData") || [];
        seriesFcListTableData = ids.map((id) => {
          const tableItem = tableList.find(
            (subItem) => (subItem.id || subItem.fcId) == id
          );
          const resItem = res.list.find(
            (listItem) => (listItem.id || listItem.fcId) == id
          );
          return {
            required: false,
            ...resItem,
            ...tableItem,
          };
        });
      }
      console.log(seriesFcListTableData, "seriesFcListTableData");
      this.seriesFcListTableData = seriesFcListTableData;
      this.initTableData = JSON.parse(JSON.stringify(seriesFcListTableData));
      this.model.seriesFcList = ids; //select-table-page组件未实现双向绑定，这里需要赋值
    },

    async setTableData(ids) {
      this.addLabelDataVisible = true;
      this.setComponentTableData(ids);
    },
    delImageFcList({ $index, row }) {
      if (this.isEdit && this.isStopOrOn) return;
      this.seriesFcListTableData.splice($index, 1);
    },
    cancelImageFcList() {
      this.addLabelDataVisible = false;
      this.seriesFcListTableData = this.initTableData;
    },
    confirmImageFcList() {
      this.addLabelDataVisible = false;
      const ids = this.seriesFcListTableData.map((item) => item.id);
      this.model.seriesFcList = ids;
      this.model.seriesFcLists = this.seriesFcListTableData.map((item) => {
        return {
          fcId: item.id || item.fcId,
          required: item.required,
        };
      });
      // this.seriesFcListTableData =
      // setDraft(this.projectId, "seriesFcListTableData", this.seriesFcListTableData);
    },
    //查看已添加组件
    checkImageFcListAll() {
      this.setTableData(this.model.seriesFcList);
      setTimeout(() => {
        const el = this.$refs.seriesTable.$el.querySelectorAll(
          ".el-table__body tbody"
        )[0];
        Sortable.create(el, {
          setData: function (dataTransfer) {
            dataTransfer.setData("Text", "");
          },
          onEnd: (e) => {
            const targetItem = this.seriesFcListTableData.splice(e.oldIndex, 1)[0];
            this.seriesFcListTableData.splice(e.newIndex, 0, targetItem);
          },
        });
      }, 1000);
    },
    async validateName(rule, value, callback) {
      if (value) {
        let model = { name: value };
        if (this.isEdit) model.id = this.projectId;
        const res = await validateTaskName(model);
        const { result: isExist } = res && res.data;
        if (isExist) {
          callback(new Error("任务名称已存在"));
        }
      }
      callback();
    },
  },
};
</script>

<style lang="less">
.projectConfig {
  min-height: 100vh;
  padding: 0 32px;
  .title {
    font-size: 16px;
    color: #333333;
    padding: 20px 0;
    font-weight: 700;
  }
  .no-margin-left {
    .el-form-item__content {
      margin-left: 0 !important;
      display: flex;
      align-items: center;
    }
    .el-checkbox-group {
      border: 1px solid #d9d9d9;
      padding-left: 10px;
      display: flex;
    }
  }
  .underscore {
    width: 100%;
    height: 1px;
    background: #e8e8e8;
    margin: 12px 0;
  }
  .el-row,
  .el-select,
  .el-cascader {
    width: 100%;
  }
  .el-checkbox {
    margin-right: 10px;
  }
  .el-col-border {
    border: 1px solid #d9d9d9;
    padding: 0 8px;
  }
  .el-form-item-select-add {
    .el-form-item__content {
      display: flex;
      max-width: 276px;
    }
    .el-button {
      width: 32px;
      height: 32px;
      background: rgba(68, 142, 151, 0.1);
      border: 1px solid #d9d9d9;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px;
      .el-icon-plus:before {
        color: #448e97;
      }
      .el-icon-minus:before {
        color: #448e97;
      }
    }
  }

  .el-button-view {
    width: 130px;
    height: 32px;
    background: rgba(68, 142, 151, 0.1);
    border-radius: 4px;
    color: #448e97;
  }
  .el-dialog {
    border-radius: 5px;
    .el-dialog__header {
      width: 100%;
      padding: 16px 20px 16px;
      background: #f5f5f5;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      .el-dialog__title {
        font-weight: 700;
        font-size: 16px;
        color: #333333;
      }
    }
  }

  .del-botton {
    font-weight: 400;
    font-size: 14px;
    color: #448e97;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }

  .label-name {
    color: #448e97;
    cursor: pointer;
  }

  .sort {
    display: inline-block;
    line-height: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    p {
      .sort-item {
        width: 3px;
        height: 3px;
        background: #666;
        margin-right: 4px;
        border-radius: 2px;
      }
    }
  }
  .set-tip {
    margin-left: 24px;
    background: rgba(68, 142, 151, 0.1);
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    align-items: center;
    .el-icon-warning:before {
      color: #448e97;
      font-size: 12px;
    }
    span {
      margin-left: 8px;
    }
  }

  .el-form-item-bold {
    .el-form-item__label {
      font-weight: bold;
      color: #333;
      line-height: 16px;
    }
  }

  .el-form-item-style {
    .el-form-item__label {
      line-height: 16px;
    }
  }

  .el-row-select-add {
    .el-col.el-col-4 {
      margin-left: 10px;
    }
  }

  .el-form-item-checkbox {
    margin-bottom: 10px;
    .el-form-item__content {
      display: flex;
      .el-select {
        width: 55%;
      }
    }
  }
}
</style>
